<script lang="ts" setup>
import { ref } from 'vue';
import NetworkView from './components/Network.vue';
import CustomParametersItemView from './components/CustomParametersItem.vue';

const customList = ref([
  { icon: 'cpuIcon', iconWidth: 36, iconHeight: 36, label: 'cpu负载', total: null, value: null },
  { icon: 'cpuIcon', label: 'cpu负载', total: null, value: null },
  { icon: 'cpuIcon', label: 'cpu负载', total: null, value: null },
  { icon: 'cpuIcon', label: 'cpu负载', total: null, value: null },
]);
</script>

<template>
  <div class="working-wrap">
    <NetworkView></NetworkView>
    <div class="content">
      <title-view title="自定义参数配置" icon="item-info"></title-view>
      <t-row :gutter="[30, 30]">
        <t-col v-for="(item, index) in customList" :key="index" :span="3">
          <CustomParametersItemView :data="item"></CustomParametersItemView>
        </t-col>
      </t-row>
    </div>
    <div class="content">
      <title-view title="可用列表" icon="item-info"></title-view>
    </div>
  </div>
</template>

<style lang="less" scoped>
.working-wrap {
  width: 100%;
  padding-top: 14px;
  .content {
    margin-top: 20px;
  }
}
</style>
